// 达人榜搜索
<template>
<div class="TalentSearch">
    <div class="search">
        <img class="icon" src="https://youyang-cdn.mdshuzhi.com/upload/icon_search.png">
        <input type='text' class='search-text' placeholder='输入名称、关键词' v-model="inputValue" @confirm="searchSubmit" @keyup.13="searchSubmit" />
    </div>
    <div v-if="isloading">
        <div class="searchlists" v-if="searchlists.length>0">
            <scroller :on-infinite="infinite" ref="myscroller" class="scroll">
                <div v-for="(item,index) in searchlists" :key='index' class="item" :class="item.id==userInfo.id?'on myposition':''">
                    <div class="pic">
                        <img :src="item.portrait">
                        <div class="follow" v-if="item.followed!=1 && item.id!=userInfo.id" @click="follow(index,item.id)"></div>
                    </div>
                    <div class="right">
                        <div class="name">
                            <text class="n">{{item.nick}}</text>
                            <text class="level">{{item.vipLevel==0?'普通用户':'LV.'+item.vipLevel}}</text>
                            <text class="my" v-if="item.id==userInfo.id">我</text>
                        </div>
                        <div class="nums">周时长:{{item.listenTimes | toHour}} | 总时长:{{item.c | toHour}}</div>
                    </div>
                    <router-link :to="'/TalentOther?id='+item.id" tag="div">
                        <div class="btn">{{item.id==userInfo.id?'查看':'听TA'}}</div>
                    </router-link>
                </div>
                <!-- <div class="empty" v-if="isEnd">没有更多了~</div> -->
            </scroller>
        </div>
        <div v-else>
            <div class="empty">暂无搜索结果~</div>
        </div>
    </div>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import {
    Toast,
    MessageBox
} from "mint-ui";
import Footer from "@/components/layer/footer";
export default {
    name: "TalentOther",
    data() {
        return {
            title: '达人搜索结果',
            searchlists: [],
            page: 1,
            pageSize: 10,
            type: 1,
            isEnd: false,
            userInfo: localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : '',
            inputValue: '',
            input: '',
            isloading: false,
        };
    },
    mounted() {
      window.addEventListener('mousewheel',this.handleScroll);
    },
    destroyed(){
      window.removeEventListener('mousewheel',this.handleScroll)
    },
    methods: {
        handleScroll(e){
          let that = this  //此this指向的是vue
          console.log(e.wheelDelta)
          if (e.wheelDelta < 0) {
              that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
          } else {
            that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
          }
        },
        //搜索请求
        search() {
            controller.search({
                page: this.page,
                pageSize: this.pageSize,
                keyword: this.inputValue,
            }).then(res => {
                for (let item of res.baseData.list) {
                    item.followed = 0
                }
                this.searchlists = this.searchlists.concat(res.baseData.list)
                this.isEnd = res.baseData.lastPage
                this.isloading = true
            }).catch(res => {
                this.isloading = true
            })
        },
        // 上拉加载
        infinite(done) {
          console.log("上拉加载", this.isEnd);
          setTimeout(() => {
            if (this.isEnd) {
                // Toast("暂无数据");
                this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              console.log("进行下一次加载操作");
              this.page = this.page + 1;
              this.search()
              done(); //进行下一次加载操作
            }
          }, 1500);
        },
        //搜索
        searchSubmit() {
            console.log("执行搜索")
            this.searchlists = []
            this.page = 1
            this.search()
        },
        //关注的动作
        follow(index, id) {
            controller.follow({
                followedUserId: id
            }).then(res => {
                Toast("关注成功！");
                this.searchlists[index].followed = 1
            }).catch(res => {
                this.searchlists[index].followed = 1
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.orange {
    color: #E66D4D;
}

.search {
    padding: 24px;
    position: relative;
}

.search .icon {
    width: 28px;
    height: 28px;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 48px;
    margin: auto;
}

.search .search-text {
    width: 100%;
    padding: 0 24px 0 77px;
    box-sizing: border-box;
    -webkit-appearance: none;
    border: none;
    height: 64px;
    background: rgba(246, 246, 250, 1);
    border-radius: 32px;
    font-size: 28px;
}

.scroll {
    height: calc(100vh - 112px) !important;
    box-sizing: border-box;
    /deep/ &._v-container{
      min-width: 640px;
      max-width: 960px;
      margin: 0 auto;
      top: 112px;
      left: 50%;
      transform: translateX(-50%);
      ._v-content{
        padding-bottom: 40px;
      }
    }
}

.defaultlists {
    padding: 10px 32px;
}

.searchlists {
    height: calc(100vh - 120px);
    box-sizing: border-box;
}

.searchlists .item {
    padding: 16px 24px;
    overflow: hidden;
    position: relative;
}

.searchlists .key {
    width: 36px;
    height: 88px;
    margin-right: 20px;
    float: left;
    color: #A8ACBB;
    font-size: 20px;
    line-height: 88px;
}

.searchlists .key image {
    width: 36px;
    height: 36px;
}

.searchlists .pic {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    margin-right: 24px;
    float: left;
    background-color: #eee;
    position: relative;
}

.searchlists .pic img {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 2;
    background-color: #eee;
}

.searchlists .pic .follow {
    width: 28px;
    height: 28px;
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_follow.png) no-repeat center center;
    background-size: 100%;
}

.searchlists .right {
    overflow: hidden;
}

.searchlists .name {
    color: #323232;
    font-size: 30px;
    margin-bottom: 15px;
    padding-right: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.searchlists .nums {
    color: #A8ACBB;
    font-size: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.searchlists .btn {
    width: 132px;
    height: 52px;
    border: 2px solid #EC7169;
    border-radius: 26px;
    text-align: center;
    line-height: 52px;
    color: #EC7169;
    font-size: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    margin: auto;
    z-index: 1;
}

.searchlists .level {
    font-size: 20px;
    margin-left: 10px;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding: 0 10px;
    border: 1px solid rgba(168, 172, 187, 1);
    border-radius: 14px;
}

.searchlists .my {
    color: #fff;
    min-width: 40px;
    font-size: 20px;
    margin-left: 10px;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding: 0 10px;
    background: rgba(230, 109, 77, 1);
    border-radius: 14px;
}

.empty,
.end {
    font-size: 26px;
    text-align: center;
    color: #A8ACBB;
    padding: 20px 0 48px;
}
</style>
